<template>
  <view class="charts-box">
    <ve-empty v-if="echartDataEmpty" marginTop="12" text="根据您的筛选统计数据时发现暂无数据，请重新筛选"></ve-empty>
    <qiun-data-charts
      v-else
      type="demotype"
      :eopts="opts"
      :reload="reload"
      :chartData="echart_series"
      :echartsH5="true"
      :echartsApp="true"
    />
  </view>
</template>

<script setup lang="ts">
  import { getChartData } from '../models'
  import { ref, watch } from 'vue'

  const props = defineProps({
    echartData: {
      type: Object,
      default: () => ({}),
    },
    timeData: {
      type: Number,
      default: null,
    },
  })

  const echart_series = ref<any>({})
  const opts: any = {}

  const reload = ref(false)
  const echartDataEmpty = ref(true)

  watch(
    () => [props.echartData, props.timeData],
    ([newVal, newTimeData]: any) => {
      echartDataEmpty.value = true
      echart_series.value = {}
      const { series_data }: any = getChartData()

      if (newVal && newVal.barDataList) {
        const hasData = newVal.barDataList.some((item: any) => item.totalAmount != 0)

        if (!hasData) {
          return
        } else {
          echartDataEmpty.value = false
        }

        newVal.barDataList.forEach((barItem: any) => {
          series_data.find((item: any) => {
            if (item.name == barItem.name) {
              item.name = barItem.name
              item.value = Math.abs(barItem.totalAmount)
              item.source = barItem.totalAmount
              item.count = barItem.count
            }
          })
        })

        const result = [
          {
            type: 'pie',
            // startAngle: 300, //起始角度
            radius: ['30%', '50%'],
            center: ['50%', '50%'],
            label: {
              format: newTimeData != null ? 'orderPieLabelFormat2' : 'orderPieLabelFormat',
              color: '#000',
            },
            data: series_data,
          },
        ]

        reload.value = true
        echart_series.value = JSON.parse(JSON.stringify({ series: result }))
      }
    },
    {
      immediate: true,
      deep: true,
    },
  )
</script>

<style scoped>
  .charts-box {
    width: 100%;
    height: 300px;
  }
</style>
